<template>
    <div class="person">
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>
        <button @click="changeName()">修改姓名</button>
        <button @click="changeAge()">修改年龄</button>
        <button @click="checkTel()">获取联系方式</button>       
        <hr/>
        <h2>一辆{{car.name}}汽车，售价是{{car.price}}万</h2>
        <button @click="changeCarPrice()">修改汽车的售价</button>
    </div>

</template>

<script setup lang="ts" name="Person">
import { ref } from 'vue';
import { reactive } from 'vue';
        let name=ref("张三")
        let age=ref(22)
        let tel="15698569999"
        let car=reactive({"name":"宝马","price":50})
        // 在vue3中 setup函数中已经弱化了this的使用
        // 此处的this是一个未定义的内容`undefined`，不能像vue2中一样通过this进行调用数据对象
        // console.log("this:"+this)

        function changeName(){
            // console.log(this.msg)
            // 在这里直接使用数据名字即可对该数据进行操作
            // 在使用中，默认情况下，数据对象不是一个响应式的变量
            name.value="tom"
            console.log(name)
        }
        function changeAge(){
            age.value+=1
            console.log(age)
        }
        function checkTel(){
            alert(tel)
        }
        function changeCarPrice(){
            car.price+=10
            console.log(car.price)
            console.log(car)
        }

</script>
<style>
.person{
    background-color: lightseagreen;
	box-shadow: 6px 6px 12px gray;
	border-radius: 6px;
	line-height: 40px;
	padding:10px;

}
</style>